import React, { Component } from 'react';
import { Text, View, ScrollView, StyleSheet } from 'react-native';
import { px2dp } from 'bee/utils/px2dp';
import { colors, sizes } from 'bee/themes';
import { Icon, Names } from 'bee/components/Icon';
import { CuttingLine } from 'bee/components/Line';
import { Attache } from 'bee/components/Attache';
import { PrimaryBtn } from 'bee/components/Buttons';
import { SCREENS } from 'bee/constants';

// @flow
type Props = {
  navigation: object,
  // totalPrem: number,
  // serviceSecialist: string,
  // CardDetail: object,
  // orderNumber: string,
};

export default class PaySuccess extends Component<Props> {
  static defaultProps = {
    // totalPrem: 5678,
    // serviceSecialist: 'zhouzhou',
    // CardDetail: {
    //   bank: 'China Bank',
    //   cardNumber: 6222600340002543,
    //   transferLimit: '单笔限额50万   单日累计限额50万',
    // },
    // orderNumber: '738393747390292833339',
  };

  render() {
    const { params } = this.props.navigation.state;

    return (
      <ScrollView showsVerticalScrollIndicator style={styles.contentOuterBox}>
        {/* 服务专员 */}
        <Attache />
        <View style={styles.generalBox}>
          <View style={styles.orderNumberBox}>
            <Text style={styles.commonText}>订单号： {params.orderNumber}</Text>
          </View>

          <CuttingLine />

          <View style={styles.upperBox}>
            <Icon name={Names.duigou} color={colors['1001']} size={sizes.f6} />
            <Text style={styles.paySuccessText}>支付成功</Text>
          </View>

          <CuttingLine />

          <View style={styles.totalPremBox}>
            <Text style={styles.commonText}>合计保费</Text>
            <Text>
              <Text style={{ fontSize: px2dp(48) }}>
                {params.totalPrem}
                {/* {this.props.totalPrem} */}
              </Text>
              <Text style={styles.commonText}>元</Text>
            </Text>
          </View>

          <CuttingLine />

          <View style={styles.firstPeriodCardDetailText}>
            {/* 银行名 */}
            <Text style={[styles.littleTextStyle, styles.bankDetailText]}>
              {params.CardDetail.bank}
            </Text>
            {/* 银行卡号 */}
            <Text style={[styles.littleTextStyle, styles.bankDetailText]}>
              {params.CardDetail.cardNumber}
            </Text>
            {/* 转账限额 */}
            <Text style={[styles.cashValueDetailBox, styles.bankDetailText]}>
              {params.CardDetail.transferLimit}
            </Text>
          </View>
        </View>

        <View style={styles.returnBtn}>
          <PrimaryBtn
            text="返回首页"
            onPress={() => {
              this.props.navigation.navigate(SCREENS.Main);
            }}
          />
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  serviceSecialist: {
    lineHeight: px2dp(61),
    textAlign: 'center',
    fontSize: px2dp(22),
    color: colors['1103'],
  },
  contentOuterBox: {
    paddingHorizontal: px2dp(30),
    marginBottom: px2dp(10),
    height: px2dp(640),
  },
  generalBox: {
    borderRadius: px2dp(20),
    backgroundColor: colors.white,
    paddingHorizontal: px2dp(17),
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors['1104'],
  },
  paySuccessText: {
    fontSize: px2dp(44),
    color: colors['1101'],
    marginLeft: px2dp(30),
    // fontFamily: 'HYi1gj',
  },
  upperBox: {
    flexDirection: 'row',
    height: px2dp(169),
    alignItems: 'center',
    justifyContent: 'center',
  },
  totalPremBox: {
    flexDirection: 'row',
    height: px2dp(102),
    justifyContent: 'space-between',
    alignItems: 'center',
    marginHorizontal: px2dp(39),
  },
  commonText: {
    fontSize: sizes.f1,
    color: colors['1101'],
  },
  firstPeriodCardDetailText: {
    marginVertical: px2dp(20),
  },
  littleTextStyle: {
    fontSize: sizes.f1,
    color: colors['1101'],
    textAlign: 'center',
  },
  bankDetailText: {
    textAlign: 'left',
    lineHeight: px2dp(36),
    marginHorizontal: px2dp(41 - 17),
    marginVertical: 0,
  },
  cashValueDetailBox: {
    marginHorizontal: px2dp(40),
    marginVertical: px2dp(20),
    fontSize: sizes.f0,
    color: colors['1103'],
    lineHeight: px2dp(35),
  },
  orderNumberBox: {
    height: px2dp(81),
    justifyContent: 'center',
    marginLeft: px2dp(41 - 17),
  },
  returnBtn: {
    marginTop: px2dp(100),
  },
});
